<!-- <template>
<div class="bh-col" :class="'bh-col-' + span" :style='style'>
	<slot></slot>
</div>
</template> -->

<script>
export default {
	name: 'bh-col',
	props: {
		tag: {
			type: String,
			default: 'div'
		},
		span: {
			type: Number,
			default: 24,
		},
		offset: Number,
		pull: Number,
		push: Number,
	},
	render(h) {
		let classList = [];
		let style = {};
		let parent = this.$parent;
		classList.push('bh-col-' + this.span);
		const typeList = ['offset', 'pull', 'push'];

		typeList.forEach(prop => {
			if (this[prop] || this[prop] === 0) {
				console.log(11);
				classList.push(prop !== 'span' ? `bh-col-${prop}-${this[prop]}` : `bh-col-${this[prop]}`);
			}
		});

		if (parent && parent.$options._componentTag == 'bh-row') {
			style.paddingLeft = parent._props.gutter / 2 + 'px';
			style.paddingRight = style.paddingLeft;
		}
		return h(this.tag, {
			class: ['bh-col', classList],
			style
		}, this.$slots.default);
	},
}
</script>
